<template>
  <!-- 催收执行页-历史信息模块-案件历史轨迹 -->
  <section class="component case-history">
    <!-- 搜索区域 -->
    <data-form
      :model="searchModel"
      @handleResetForm="handleResetForm"
      @onSearch="refreshData"
      ref="form"
    >
      <template slot="inputs">
        <el-form-item label="分案类型" prop="turnType">
          <el-select
            clearable
            placeholder="请选择"
            v-model="searchModel.turnType"
          >
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('TurnType')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="队列" prop="queueCode">
          <el-input clearable v-model.trim="searchModel.queueCode"></el-input>
        </el-form-item>
        <el-form-item label="分案时间" prop="distributeDate">
          <el-date-picker
            :editable="false"
            placeholder="请选择日期"
            type="daterange"
            v-model="searchModel.distributeDate"
          ></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box
      :data="dataSet"
      :height="200"
      :page="pageService"
      @onPageChange="refreshData"
    >
      <template slot="columns">
        <el-table-column
          :min-width="$helper.getColumnWidth(5)"
          label="分案时间"
          :formatter="row => $filter.dateTimeFormat(row.caseTurnTime)"
          prop="caseTurnTime"
        ></el-table-column>
        <el-table-column
          label="分案类型"
          prop="turnType"
          :formatter="row => $filter.dictConvert(row.turnType, 'TurnType')"
          :min-width="$helper.getColumnWidth(3)"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="分案原因"
          prop="distributeReason"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="客群ID"
          prop="customersId"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="队列"
          prop="queueCode"
        ></el-table-column>
        <el-table-column
          label="渠道"
          prop="queueCategory"
          :formatter="
            row => $filter.dictConvert(row.queueCategory, 'QueueCategory')
          "
          :min-width="$helper.getColumnWidth(4)"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(10)"
          label="分案时的经办代号"
          prop="currentCollectorCode"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(10)"
          label="分案时的总金额"
          prop="caseMoney"
          :formatter="row => $filter.toThousands(row.caseMoney)"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(10)"
          label="重组原因"
          prop="reDistributeCtAt"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(10)"
          label="操作人"
          prop="operatorRealName"
        ></el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";

import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    NumberRange
  }
})
export default class CaseHistory extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private caseNo;

  private searchModel: any = {
    distributeDate: [],
    queueCode: "",
    turnType: ""
  };
  private dataSet: any[] = [];

  /**
   * 范围组件数据重置
   */
  private handleResetForm() {}

  private refreshData() {
    this.searchModel.caseId = this.caseId;
    this.searchModel.caseNumber = this.caseNo;
    const params = { ...this.searchModel };
    params.distributeDateMax = this.$filter.dateRanageFormat(
      this.searchModel.distributeDate
    ).end;
    params.distributeDateMin = this.$filter.dateRanageFormat(
      this.searchModel.distributeDate
    ).start;
    delete params.distributeDate;
    this.caseOperatorPageService
      .caseHistoryTrack(params, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private activated() {
    this.refreshData();
  }
}
</script>

<style lang="less"></style>
